<template>
	<view class="indexBig">

		<view class="addressBox">
			<view class="">
				<view class="">姓名：</view>
				<view class="">
					{{address.userName}}
					<!-- <input type="text" v-model="address.userName" placeholder="请填写收货人姓名"></input>
					<uni-icons type="right" class="icon" size="22" color="#cdcdcd"></uni-icons> -->
				</view>
			</view>
			<view class="">
				<view class="">手机号：</view>
				<view class="">
					{{address.phone}}
					<!-- <input type="text" v-model="address.phone" placeholder="请填写正确的手机号"></input>
					<uni-icons type="right" class="icon" size="22" color="#cdcdcd"></uni-icons> -->
				</view>
			</view>
			<view class="address">
				<view class="">部门：</view>
				<view>
					{{address.depart || "暂无!"}}
					<!-- <picker @change="bindSupplyBuildings" :value="supplyBuildingsIndex"
						:range="addressList.supplyBuildings">
						<view class="picker">
							
							<uni-icons type="right" class="icon" size="22" color="#cdcdcd"></uni-icons>
						</view>
					</picker> -->
				</view>
			</view>
			<view class="address">
				<view class="">取餐地址：</view>
				<view>
					{{address.pickUpAddress || "暂无!"}}
					<!-- <picker @change="bindSupplyFloors" :value="supplyFloorsIndex" :range="supplyFloorsList">
						<view class="picker">
							
							<uni-icons type="right" class="icon" size="22" color="#cdcdcd"></uni-icons>
						</view>
					</picker> -->
				</view>
			</view>
			<view class="">
				<view class="">登录密码：</view>
				<view class="">
					<input type="text" v-model="address.password" placeholder="请输入登录密码"></input>
					<!-- <uni-icons type="right" class="icon" size="22" color="#cdcdcd"></uni-icons> -->
				</view>
			</view>
		</view>

		<view class="commenButton" @click="saveUserPickupAddressFn">修改登录密码</view>

	</view>
</template>

<script>
	import util from "@/utils/util.js";
	import {
		querySupplyAddress,
		queryUserPickUpAddress,
		saveUserPickupAddress,
		queryNearnestSiteAddrByLongLat,
		changePassword
	} from "@/request/api.js";
	export default {

		data() {
			return {
				addressList: {}, //大厦信息
				supplyBuildings: [],
				supplyFloorsList: [], //楼层列表
				supplyBuildingsIndex: 0, //大厦选中下标
				supplyFloorsIndex: 0, //楼层选中下标
				addressId: '', //用户所在大厦id
				// 用户地址信息
				address: {
					"name": "",
					"phone": "",
					"building": "",
					"floor": ""
				},
				latlon: {
					latitude: 0,
					longitude: 0
				}
			};
		},
		async mounted() {
			let datas = util.getStorePage();
			// let currAddress = datas['currAddress'];
			// 如果有大厦id缓存，获取缓存里的大厦id，否则获取当前经纬度的大厦id
			// if (currAddress) {
			// 	this.addressId = currAddress.addressId

			// } else {
			// 	this.getAddressAuth();
			// }

		},
		onShow() {
			this.queryUserPickUpAddressFn();
		},
		onLoad(options) {
			// this.addressId = options.addressId
		},
		methods: {
			async initData() {
				// 查询收货地址
				await this.queryUserPickUpAddressFn();
				// 选择收货地址
				// await this.querySupplyAddressFn();
			},
			// 判断是否有获取当前位置权限 ， 如果有直接获取，没有则需要用户点击授权
			async getAddressAuth() {
				let that = this;
				// 获取用户是否开启 授权获取当前的地理位置、速度的权限。
				await uni.getSetting({
					success: async (res) => {
						// 如果没有授权
						if (!res.authSetting['scope.userLocation']) {
							// 则拉起授权窗口
							uni.authorize({
								scope: 'scope.userLocation',
								success: async (res) => {
									//点击允许后--就一直会进入成功授权的回调 就可以使用获取的方法了
									await that.getTheCurrentAddress();
								}
							})
						} else {
							await that.getTheCurrentAddress();
						}
					}
				})
			},
			// 获取当前位置最匹配的大厦
			async getTheCurrentAddress() {
				let that = this;
				await uni.getLocation({
					type: 'gcj02',
					// type: 'wgs84',
					geocode: true,
					highAccuracyExpireTime: 6000,
					isHighAccuracy: true, //是否开启高精度
					success: async function(res) {
						let latlon = {
							latitude: res.latitude,
							longitude: res.longitude
						}
						// uni.setStorageSync('latlon',JSON.stringify(latlon))
						that.latlon = latlon;
						// 根据经纬度 获取距离最近的大厦
						that.queryNearnestSiteAddrByLongLatFn();
					},
					fail: function(err) {
						console.log(err, 'err');
					}
				});
			},
			// 根据经纬度 获取距离最近的大厦
			async queryNearnestSiteAddrByLongLatFn() {
				let address = await queryNearnestSiteAddrByLongLat({
					method: "GET",
					data: {
						latitude: this.latlon.latitude,
						longitude: this.latlon.longitude
					},
				})
				this.addressId = address.result.nearnestAddrId;
				let myAddress = {
					addressId: address.result.nearnestAddrId,
					addressName: address.result.nearnestAddrName
				};
				util.setStorePage([{
					name: 'currAddress',
					data: myAddress
				}]);
				this.initData();
			},

			// 选择收货地址
			async querySupplyAddressFn() {
				let res = await querySupplyAddress({
					method: "GET",
					data: {
						siteId: this.addressId,
					}
				})
				let addressList = res.result
				this.addressList = addressList;
				let supplyFloorsList = addressList.supplyFloors[this.address.building];
				this.supplyFloorsList = supplyFloorsList;

			},
			// 选择大厦
			bindSupplyBuildings(e) {
				console.log(e, 'e');
				let value = e.detail.value;
				let {
					supplyBuildings,
					supplyFloors
				} = this.addressList;
				let supplyBuildingsName = supplyBuildings[value];;;
				if (value != this.supplyBuildingsIndex) {
					this.supplyFloorsIndex = 0;
					this.address.floor = supplyFloors[supplyBuildingsName][0]
				}
				this.supplyBuildingsIndex = value;
				this.address.building = supplyBuildingsName;
				this.supplyFloorsList = supplyFloors[supplyBuildingsName]

			},
			// 选择楼层
			bindSupplyFloors(e) {
				let value = e.detail.value;
				this.supplyFloorsIndex = value;
				console.log(this.supplyFloorsList, value)
				this.address.floor = this.supplyFloorsList[value]
			},
			// 保存用户地址
			async saveUserPickupAddressFn() {
				let userInfo = uni.getStorageSync("userInfo")
				var regExp = /^1[3456789]\d{9}$/;
				if (!this.address.password) {
					uni.showToast({
						title: "请输入登录密码!",
						icon: "none"
					})
					return;
				} 
				let res = await changePassword({
					method: "put",
					data: {
						password:this.address.password,
						companyId: userInfo.companyId,
						phone: userInfo.phoneNumber,
					}
				});
				uni.showToast({
					title: res.code == 200 ? "修改成功" : res.message,
					icon: res.code == 200 ? "success" : "none"
				})
				// if (res.code == 200) {
				// 	setTimeout(() => {
				// 		uni.navigateBack()
				// 	}, 2000)
				// }

			},
			// 查询用户地址
			async queryUserPickUpAddressFn() {
				let userInfo = uni.getStorageSync("userInfo")
				let res = await queryUserPickUpAddress({
					method: "GET",
					data: {
						companyId: userInfo.companyId,
						phone: userInfo.phoneNumber,
					}
				});
				if (res.code == 200) {
					this.address = res.data;
				}
			},
		},
		watch: {

		}
	};
</script>

<style lang="scss" scoped>
	.indexBig {
		min-height: 100vh;
		background: #F6F6F6;
		// background: linear-gradient(0.45deg, #f5f5f5 6.52%, #35AA4C 58.65%, #35AA4C 98.93%);
		background-size: 100vw 466rpx;
		background-repeat: no-repeat;
		background-color: #f5f5f5;
		padding: 30rpx;
		padding-bottom: 150rpx;

		.addressBox {
			background-color: #fff;
			border-radius: 20rpx;
			box-shadow: 0 0 5px rgba(0, 0, 0, 0.05);
			padding: 20rpx 30rpx;

			.address {
				/deep/.u-input {}

				>view {
					>view:nth-child(1) {
						width: calc(100% - 35rpx);
						line-height: 1.5;
					}
				}
			}

			>view {
				@include flexs(space-between, center);
				margin: 20rpx 0;
				position: relative;
				font-size: 30rpx;
				line-height: 100rpx;
				border-bottom: 1rpx solid #EEEEEE;

				&:last-child {
					border-bottom: 0;
				}

				>view:nth-child(1) {
					width: 30%;
					color: #999999;
				}

				>view:nth-child(2) {
					@include flexs(flex-end, center);
					width: 70%;
					color: #000000;
					text-align: right;

					.icon {
						margin-left: 10rpx;
					}
				}

				/deep/.u-input {
					width: 100%;
					border-bottom: 1px solid rgba(0, 0, 0, 0.05);
					border-color: rgba(0, 0, 0, 0.05) !important;
				}

				/deep/.u-input,
				/deep/.u-input__input {
					height: 84rpx;
					line-height: 84rpx;
					min-height: auto !important;
				}

				>view {
					>.arrow {
						width: 30rpx;
						height: 30rpx;
						position: absolute;
						right: 0;
						top: calc((100% - 30rpx) / 2);
					}
				}
			}

			>.posiImg {
				display: block;

				>view {
					width: 100%;

					&:nth-child(2) {
						width: 100%;
					}
				}

				>.imgContent {
					// padding-bottom: 100%;
					// position: relative;
					// image {
					// 	position: absolute;
					// 	left: 0;
					// 	top: 0;
					// 	bottom: 0;
					// 	right: 0;
					// 	// max-width: 100%;
					// 	// max-height: 100%;
					// 	width: 100%;
					// 	height: 100%;

					// 	margin: 0 auto;
					// }
				}
			}
		}

		.commenButton {
			width: 70%;
			border-radius: 50rpx;
			background-color: #EB5B1E;
			color: #fff;
			line-height: 1;
			padding: 30rpx 0;
			font-size: 32rpx;
			margin: 0 auto;
			margin-top: 80rpx;
			text-align: center;
		}


	}
</style>